<% var obj = {pageTitle:"新增影厅"};%>
{{include "../Header.html" obj}}
<style type="text/css">
  .half_seats_item
  {
    margin-top: 3px;
    margin-bottom: 3px;
  }
</style>
<div class=" container">
  <div class=" page-header">
    <h2 class=" text-center text-primary">新增影厅</h2>
  </div>
  <div class="">
    <form role="form" class=" form-horizontal">
      <div class=" form-group">
        <label for="" class=" control-label col-sm-2">影厅名称</label>
        <div class=" col-sm-7">
          <input type="text" class=" form-control" placeholder="请输入影厅名称" name="h_name" id="h_name">
        </div> 
      </div>
      <div class=" form-group">
        <label for="" class=" control-label col-sm-2">影厅坐位</label>
        <div class=" col-sm-5">
          <ul class=" list-unstyled" id="half_seats">
            
          </ul>
        </div>
        <div class=" col-sm-2">
          <button type="button" class=" btn btn-primary" id="btnAddRow">
            <span class=" glyphicon glyphicon-plus"></span>新增一行
          </button>
        </div>
      </div>
      <div class=" form-group">
        <div class=" col-sm-7 col-sm-offset-2">
          <button type="button" class=" btn btn-primary" id="btnSave">保存</button>
          <button type="button" class=" btn btn-danger">返回</button>
        </div>
      </div>
    </form>
  </div>
</div>
<script type="text/template" id="half_row_item">
  <li class="row half_seats_item">
    <div class=" col-sm-8">
      <select class=" form-control sel_half">
        <%for(var i=1;i<=12;i++){%>
          <option value="{{i}}">{{i}}</option>
        <%}%>
      </select>
    </div>
    <div class=" col-sm-4">
      <button class=" btn btn-danger btn-del-half-row" type="button" title="删除">
        <span class=" glyphicon glyphicon-trash"></span>
      </button>
    </div>
  </li>
</script>
<script type="text/javascript">
  $(function(){
    $("#btnAddRow").click(function(){
      //这个地方template指的是art-template   不要与之前的template弄混了
      var html=template("half_row_item");
      $("#half_seats").append(html());
     
    });
    $("#half_seats").on("click",".btn-del-half-row",function(){
      $(this).parent().parent().remove();
    });

    //当我去点击这个保存按钮的时候，怎么样转换成二维数组
    $("#btnSave").click(function(){
      //第一步，把我们的影厅信息 转换成我们的二维数组
      var arr=[];
      $(".sel_half").each(function(index,ele){
        var count=parseInt($(this).val());
        var temp=[];
        for(var i=0;i<count;i++){
          temp.push(0);
        }
        arr.push(temp);
      });
      //第二步：向后台传值
      //使用Ajax请求
      //注意事项：面试考点：Ajax如何向后台传递数组
      $.post("/HallInfo/addHallInfo",{
        h_name:$("#h_name").val(),
        h_seats:JSON.stringify(arr)
      },function(data){
        if(data.status=="success"){
          layer.msg("添加成功");
        }
        else{
          layer.alert("添加失败");
        }
      });
     
    });
  })
</script>
{{include "../Footer.html"}}